<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="renderer" content="webkit">
    <meta name="description" content="Tetris" />
    <meta name="keywords" content="Tetris">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta charset="UTF-8">
    <title>Tetris</title>
    <link href="https://chvin.github.io/react-tetris/loader.css" rel="stylesheet" />
    <link href="https://chvin.github.io/react-tetris/css-1.0.1.css" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }

        .todo-list li .destroy {
            display: block !important;
        }

        #replay {
            border: 1px solid grey;
            padding: 2px 5px;
            font-size: 18px;
            color: red;
            font-weight: bold;
            cursor: pointer;
            position: absolute;
            left: 0;
        }

        #replay.locked {
            color: rgb(205, 203, 203);
            border-color: rgb(205, 203, 203);
        }

        #replay.hide,
        ._2iIk._111n,
        a[title="查看源代码"] {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <a style="position: absolute; z-index: 100; right: 0" href="https://github.com/oct16/TimeCat">
        <img width="100" height="100"
            src=""
            alt="Fork me on GitHub" />
    </a>
    <div id="root">
        <div class="load">
            <div class="loader">Loading...</div>
        </div>
    </div>
    <!--hidden--><button id="replay" class="locked">Replay</button>
    <script type="text/javascript" src="https://chvin.github.io/react-tetris/app-1.0.1.js"></script>
    <script id="time-cat" src="./timecatjs.min.js"></script>

    <script>
        const { record } = timecat
        ctrl = record()
        handleReplay(ctrl)

        function handleReplay(ctrl) {
            function isPC() {
                var userAgentInfo = navigator.userAgent;
                var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
                var flag = true;
                for (var v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
                }
                return flag;
            }
            const replayButton = document.getElementById('replay')
            setTimeout(() => {
                replayButton.className = ''
            }, 5000);
            document.addEventListener(isPC() ? 'click' : 'touchstart', e => {
                if (e.target === replayButton) {
                    if (replayButton.className) {
                        return
                    }
                    replayButton.className = 'hide'
                    ctrl.unsubscribe()
                    if (isPC()) {
                        window.open('replay.html')
                    } else {
                        location.href = './replay.html'
                    }
                }
            })
        }
    </script>

    <script>
        const root = document.getElementById('root')
        const iframeNodes = root.getElementsByTagName('iframe')
        const qr = root.querySelector('img[alt="二维码"]')
            ;[qr, ...iframeNodes].forEach(node => {
                if (node) {
                    node.parentElement.removeChild(node)
                }
            })
    </script>

    <!--env-->
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-151180797-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'UA-151180797-1');
    </script>
    <!--env-->
</body>

</html>
